<template>
	<view class="home-Fu">
		<ul>
			<li v-for="item in list" @click="goDel(item)">
				<view class="home-Fu-lop">
					<image :src="item.img"></image>
				</view>
				<view class="home-Fu-item">{{ item.title }}</view>
			</li>
		</ul>
	</view>
</template>

<script setup>
import {
	ref
} from "vue"
let list = ref([{
	img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u699.svg",
	title: "手机开门"
},
{
	img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u703.svg",
	title: "访客邀请",
	url: '/pages/guest/guest'
},
{
	img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u706.svg",
	title: "生活缴费",
	url: "/pages/waterElectric/payHome"
},
{
	img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u707.svg",
	title: "我的房屋",
	url: '/pages/house/house'
},
])
let goDel = (item) => {
	uni.navigateTo({
		url: item.url
	})
}
</script>

<style lang="scss">
ul {
	list-style: none;
}

.home-Fu {
	margin: 0 20rpx;

	ul {
		background-color: #fff;
		padding: 20rpx;

		display: flex;
		flex-direction: row;
		justify-content: space-around;

		li {
			width: 110rpx;

			image {
				margin-left: 12rpx;
				height: 80rpx;
				width: 80rpx;
				vertical-align: middle;
			}

			.home-Fu-item {
				margin-top: 14rpx;
			}

			view {
				width: 100%;
				margin: 0 auto;
				font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size: 24rpx;
				text-align: left;
			}
		}
	}
}

.home-Fu li:nth-child(2) .home-Fu-lop {
	background-color: #9a9afa;
	height: 80rpx;
	width: 80rpx;
	border-radius: 10rpx;

	image {
		margin-left: 5rpx;
		width: 65rpx;
	}
}

.home-Fu li:nth-child(3) .home-Fu-lop {
	background-color: #6ac774;
	height: 80rpx;
	width: 80rpx;
	border-radius: 10rpx;

	image {
		margin-left: 5rpx;
		width: 65rpx;
	}
}

.home-Fu li:nth-child(4) .home-Fu-lop {
	background-color: #ff6600;
	height: 80rpx;
	width: 80rpx;
	border-radius: 10rpx;

	image {
		margin-left: 5rpx;
		width: 65rpx;
	}
}
</style>